<template>
	<view class="contnet">
		<view class="mplist" v-for="(el,ind) in datas"  @click="gotodetail(ind)">
			<image mode="aspectFill"class="list-detail-img" :src="el.typeImg"></image>
			<view class="list-detail-content">
				<view class="list-detail-content-name">
					<text class="list-detail-content-name-txt">{{el.name}}</text>
				</view>
				<view class="listpf">
					<view class="name">
						<view class="pingfen">
							<view class="avgname">{{el.avg==0?'5':el.avg}}</view>
							<view class="xhx"></view>
						</view>
						<view class="wenzi yhx">
							{{el.remarkNum}} <text>条点评</text>
						</view>
						<view class="wenzi">
							{{el.remarkNum}} <text>收藏</text>
						</view>
					</view>
				</view>
				<view class="list-detail-content-price">
					<view class="list-detail-content-price-text">{{el.address}}</view>
					<view class="yuding" v-if="el.price!=0">
						<text class="ydfh"> ¥</text>
						{{el.price}}
						<text class="ydname">起</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['datas'],
		data(){
			return{
				allList:[]
			}
		},
		created() {
			
		},
		mounted() {
			this.allList=this.datas;
		},
		methods:{
			gotodetail(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.pingfen{
		width: 51rpx;
		text-align: center;
		position: relative;
		font-size: 33rpx;
		font-weight: 500;
		color: #333333;
		margin-right: 25rpx;
		top: -10rpx;
		.avgname{
			z-index: 99;
			position: relative;
			font-weight: bold;
		}
		.xhx{
			width: 51rpx;
			height: 10rpx;
			background: #FFD821;
			position: absolute;
			bottom: 8rpx;
		}
	}
	.listpf{
		height: 50upx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 10rpx;
		.name{
			display: flex;
			.wenzi{
				color: rgba(51, 51, 51, 1);
				font-size: 25upx ;
				padding-right: 15upx;
			}
			.yhx{
				border-right: 2upx solid #cccccc;
				margin-right: 15upx;
			}
		}
		.pfname{
			width: 79upx;
			height: 79upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 8upx;
			background: linear-gradient(45deg, #FF540B 0%, #FF8400 74%);
			.xxfs{
				font-size: 36upx;
				line-height: 36upx;
				font-family: DIN;
				font-weight: bold;
				color: #FFFFFF;
			}
			.title{
				display: flex;
				align-items: center;
				image{
					width: 18upx;
					height: 17upx;
					opacity: 0.8;
				}
				.fs{
					font-size: 22upx;
					font-family: Alibaba PuHuiTi;
					color: #FFFFFF;
					opacity: 0.9;
				}
			}
		}
	}
	
	.xiahuaxian {
		width: 750upx;
		height: 6upx;
		background-color: rgba(245, 245, 245, 1);
		margin-top: 28upx;
		margin-bottom: 20upx;
	}
	
	.yuding {
		text-align: center;
		font-size: 42upx;
		color: rgba(255, 84, 11, 1);
		font-weight: bold;
		.ydws{
			color: rgba(255, 84, 11, 1);
			font-size: 29upx;
		}
		.ydname{
			color: rgba(119, 119, 119, 1);
			font-size: 25upx;
			margin-left: 8rpx;
		}
		.ydfh{
			color: rgba(255, 84, 11, 1);
			font-size: 25upx;
			margin-right: 8rpx;
		}
	}
	.list-detail-content-price {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-top: 5upx;
		.list-detail-content-price-text {
			width: 400rpx;
			font-size: 22upx;
			height: 30rpx;
			color: rgba(151, 151, 151, 1);
			display: inline-block;
			white-space: nowrap; 
			overflow: hidden;
			text-overflow:ellipsis;
		}
	}
	.list-detail-content-name {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 18upx;
		.list-detail-content-name-txt {
			font-size: 34upx;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}
		.list-detail-content-dj-txt {
			font-size: 22upx;
			color: rgba(255, 84, 11, 1);
			background: #FFF1EB;
			border-radius:4upx;
			width: 58upx;
			height: 33upx;
			text-align: center;
			line-height: 33upx;
			margin-left: 11upx;
		}
	}
	
	.list-detail-content {
		width: 616rpx;
	}
	
	.list-detail-img {
		width: 700upx;
		height: 393upx;
		border-radius: 17rpx 17rpx 0rpx 0rpx;
	}
	.mplist {
		width: 700upx;
		margin-top: 20upx;
		background: #fff;
		height: 607upx;
		display: flex;
		flex-direction: column;
		border: 1rpx solid #f3f3f3;
		box-shadow: 0 4rpx 9rpx rgba(0,0,0,0.05);
		border-radius: 17rpx;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
